<template>
  <div class="breadcrumb">
    <a-breadcrumb>
      <template v-for="item in levelList">
        <a-breadcrumb-item :key="item.path" v-if="item.meta.title">
          <span v-if="levelList.indexOf(item) === levelList.length - 1">
            {{ item.meta.title }}
          </span>
          <router-link v-else :to="item.path">
            {{ item.meta.title }}
          </router-link>
        </a-breadcrumb-item>
      </template>
      <slot name="breadcrumb-item"></slot>
    </a-breadcrumb>
  </div>
</template>

<script>
  export default {
    name: 'Breadcrumb',
  };
</script>
<script setup>
  const route = useRoute();
  let levelList = ref([]);
  const getBreadcrumb = () => {
    const matched = route.matched.filter((item) => item.name);
    levelList.value = matched;
  };
  watch(
    route,
    () => {
      getBreadcrumb();
    },
    { immediate: true, deep: true }
  );
</script>

<style lang="less" scoped>
  .breadcrumb {
    .ant-breadcrumb {
      padding: 10px 0;
    }
  }
</style>
